<template>
  <div class='container'>

    <el-dialog :title="mask" :visible='isShowDialog' width='400px' :before-close="handleClose">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" @submit.native.prevent>
        <div class='container-item'>
          <el-form-item label="学科名称" :label-width="formLabelWidth" prop='subjectName'>
            <el-input autocomplete="off" v-model='ruleForm.subjectName' style=' padding:0px 15px'></el-input>
          </el-form-item>

          <el-form-item>
            <label style='padding:0px 12px 0px 0px'>是否显示</label>
            <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="ruleForm.isFrontDisplay">

            </el-switch>
          </el-form-item>
        </div>

        <div class='three'>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handelCancel">取消</el-button>
            <el-button type="primary" @click='handelEnter'>确 认</el-button>
          </span>

        </div>

      </el-form>

    </el-dialog>

  </div>
</template>

<script>
import { add, update } from '../../api/hmmm/subjects'

export default {

  data () {
    return {
      title: '',
      formLabelWidth: '80px',
      // 表单数据

      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }

        ]

      }

    }
  },
  computed: {
    mask () {
      return this.change()
    }
  },
  props: {
    isShowDialog: {
      type: Boolean,
      require: true
    },
    ruleForm: {
      type: Object,
      default: () => ({})
    },
    obj: {
      type: Object,
      default: () => ({})
    }
  },

  methods: {
    // 点击取消，清空表单，关闭对话框
    handelCancel () {
      this.$emit('cancel', this.isShowDialog)
      this.$emit('reset', this.ruleForm)
    },
    handleClose () {
      this.$emit('cancel', this.isShowDialog)
    },
    change () {
      if (!this.ruleForm.id) {
        this.title = '新增学科'
        return this.title
      } else {
        this.title = '编辑学科'
        return this.title
      }
    },

    handelEnter () {
      if (!this.ruleForm.id) {
        // 新增学科,调用接口，重置表单，关闭弹窗
        // 兜底家宴
        this.$refs.ruleForm.validate(async valid => {
          if (valid) {
            // 调用接口
            if (this.ruleForm.isFrontDisplay === 'true') {
              this.ruleForm.isFrontDisplay = 1
            } else {
              this.ruleForm.isFrontDisplay = 0
            }
            const res = await add(this.ruleForm)
            console.log(res)

            this.$emit('cancel', this.isShowDialog)
            this.$emit('reset', this.ruleForm)
            this.$emit('new')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        // 边界学科,调用接口，重置表单，关闭弹窗,刷新列表
        this.$refs.ruleForm.validate(async valid => {
          if (valid) {
            // 调用接口
            const res = await update(this.ruleForm)
            console.log(res)

            this.$emit('cancel', this.isShowDialog)
            this.$emit('reset', this.ruleForm)
            // 刷新列表
            this.$emit('new')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 30px 20px;
}
.three {
  text-align: right;
}
</style>
